<template>
  <el-dialog
    title="名额"
    :visible.sync="dialogVisible"
    width="50%"
    :close-on-click-modal="false"
  >
    <div>
      <p>
        你可以为每个选项设定名额。每次有人选择，就会占用1个名额，直至名额用完。同时你也可以自定义名额用完之后的文案提示。
      </p>
      <div class="el-form el-form--label-top" style="margin-top: 20px">
        <div class="el-form-item">
          <div class="el-form-item__label" style="display: flex">
            <div style="flex: 1"><b>选项设置</b></div>
            <div>
              <el-popover
                width="300"
                trigger="click"
                v-model="quotaSettingVisible"
              >
                <div>
                  <p>名额设置</p>
                  <div style="margin: 10px 0">
                    <el-input-number
                      class="w100"
                      placeholder="请输入"
                      v-model="quota"
                      :min="0"
                    ></el-input-number>
                  </div>
                  <div>
                    <div class="el-popconfirm__action">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="onQuotaSetting()"
                      >确定
                      </el-button
                      >
                      <el-button
                        size="mini"
                        @click="quotaSettingVisible = false"
                      >取消
                      </el-button
                      >
                    </div>
                  </div>
                </div>
                <el-button type="text" slot="reference">批量设置</el-button>
              </el-popover>
            </div>
          </div>
          <div class="el-form-item__content">
            <el-table border :data="copyActiveData.config.options">
              <el-table-column
                property="label"
                label="选项"
              ></el-table-column>
              <el-table-column property="quotaSetting" label="名额设置">
                <template slot-scope="scope">
                  <el-input-number
                    :min="1"
                    class="w100"
                    v-model="scope.row.quotaSetting"
                    placeholder="请输入"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                property="quotaSetting"
                label="剩余名额"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.quotaSetting">
                     {{getSurplusQuota(scope.row)}}
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="el-form-item">
          <div class="el-form-item__label">
            <b>剩余名额为0时，显示文案</b>(仅限20个字符)
          </div>
          <div class="el-form-item__content">
            <el-input
              v-model="copyActiveData.config.quotaBlankWarning"
            ></el-input>
          </div>
        </div>
        <div class="el-form-item">
          <div class="el-form-item__label">
            <b>选项名额重置</b>
            <el-tooltip
              class="item"
              content="勾选后，名额可按「天」「周」自动重置。每天重置时间为0点，每周重置时间为每周日晚上0点。系统将在00:00-00:30 进行名额重置，期间问卷不可填写。重置期间请勿修改数据详情。"
              effect="dark"
              placement="top-start"
            >
              <i class="el-icon-warning"/>
            </el-tooltip>
          </div>
          <div class="el-form-item__content">
            <el-radio-group v-model="copyActiveData.config.quotaCycleRule">
              <el-radio label="fixed">不重置</el-radio>
              <el-radio label="per_day">按天</el-radio>
              <el-radio label="per_week">按周</el-radio>
            </el-radio-group>
            <div>
<!--              <el-checkbox v-model="copyActiveData.config.quotaRecoverable"-->
<!--              >删除数据后，选项名额自动恢复-->
<!--              </el-checkbox-->
<!--              >-->
            </div>
            <div>
              <el-checkbox
                v-model="copyActiveData.config.hideChoiceWhenQuotaEmpty"
              >不向填表者展示选项名额剩余数字
              </el-checkbox
              >
            </div>
            <div>
              <el-checkbox v-model="copyActiveData.config.hideQuota"
              >选项名额为空时隐藏选项
              </el-checkbox
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveQuotaSetting"
        >确 定</el-button
        >
      </span>
  </el-dialog>
</template>

<script>
import OptionQuotaMixin from "../../FormItem/mixins/OptionQuotaMixin"

export default {
  name: "OptionQuota",
  mixins: [OptionQuotaMixin],
  props: {
    activeData: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      copyActiveData: JSON.parse(JSON.stringify(this.activeData)),
      dialogVisible: false,
      quotaSettingVisible: false,
      quota: "",
      item: this.activeData
    }
  },
  watch: {
    activeData: {
      handler(val) {
        this.copyActiveData = JSON.parse(JSON.stringify(val))
      },
      deep: true
    }
  },
  methods: {
    openQuotaSetting() {
      this.dialogVisible = true
      this.getOptionUsedQuota()
    },
    onQuotaSetting() {
      const {quota} = this
      this.activeData.config.options.map((e) => {
        e.quotaSetting = quota
        return e
      })
      this.quotaSettingVisible = false
    },
    saveQuotaSetting() {
      this.activeData.config.quotaCycleRule = this.copyActiveData.config.quotaCycleRule
      this.activeData.config.hideChoiceWhenQuotaEmpty = this.copyActiveData.config.hideChoiceWhenQuotaEmpty
      this.activeData.config.hideQuota = this.copyActiveData.config.hideQuota
      this.activeData.config.quotaBlankWarning = this.copyActiveData.config.quotaBlankWarning
      this.activeData.config.quotaRecoverable = this.copyActiveData.config.quotaRecoverable
      this.activeData.config.options = this.copyActiveData.config.options
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>

</style>
